//LiuZh 2017-07-03
import React, {Component} from 'react';

import {
    View,
    Image,
    Dimensions,
    TouchableWithoutFeedback,
    StyleSheet,
    Text,
    TouchableOpacity,
    Alert
} from 'react-native';

import Http from '../../../core/utils/http';
import InitDB from '../../../core/database/init-db';
import Constant from '../../../core/constant/constant';

const winWidth = Dimensions.get('window').width;

export default class FindTop extends Component {

    constructor(props) {
        super(props);

        this.state = {
            tabCheckOne: true,
            price_: 0,
        }
    }

    componentDidMount() {
        let courses = InitDB.getCourses();

        if (courses && courses[0]) {
            this.setState({
                price_: courses[0].price_
            })
        }
    }

    render() {
        let checkTab = this.state.tabCheckOne;
        let banner = Constant.serverUrl + InitDB.getBanner()[0].URL_;

        //alert(banner);
        return (
            <View style={styles.body}>
                <View style={styles.banner}>
                    <Image style={styles.banner}
                           source={{uri: banner}}/>
                </View>
                <View style={styles.zlBox}>
                    <Text>付岩说</Text>
                    <View style={{flex: 1}}/>
                    <TouchableWithoutFeedback onPress={Http.goumai}>
                        {
                            this.state.price_ === 0 ?
                                <View/>
                                :
                                <View style={styles.dyzlBox}>
                                    <Text style={styles.dyzlTxt}>订阅专栏{this.state.price_}/年</Text>
                                </View>
                        }
                    </TouchableWithoutFeedback>
                </View>
                <View style={styles.tabBox}>
                    <View style={{flex: 1, flexDirection: 'row'}}>
                        <TouchableWithoutFeedback
                            onPress={checkTab ? null : this.changeTab}>
                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center',}}>
                                <Text style={[styles.tabTxt, {color: checkTab ? '#00F' : '#666'}]}>课程简介</Text>
                            </View>
                        </TouchableWithoutFeedback>
                        <TouchableWithoutFeedback
                            onPress={checkTab ? this.changeTab : null}>
                            <View style={{flex: 1, justifyContent: 'center', alignItems: 'center',}}>
                                <Text style={[styles.tabTxt, {color: checkTab ? '#666' : '#00F'}]}>栏目简介</Text>
                            </View>
                        </TouchableWithoutFeedback>
                    </View>
                    <View style={{height: 3, width: winWidth, flexDirection: 'row'}}>
                        <View style={[styles.tabLine, {backgroundColor: checkTab ? '#00F' : 'rgba(0,0,0,0)'}]}/>
                        <View style={[styles.tabLine, {backgroundColor: checkTab ? 'rgba(0,0,0,0)' : '#00F'}]}/>
                    </View>
                </View>
            </View>
        )
    }

    changeTab = () => {
        this.setState({
            tabCheckOne: !this.state.tabCheckOne,
        });
        this.props.callBack(this.state.tabCheckOne);
    }
}

const styles = StyleSheet.create({
    body: {
        backgroundColor: '#EFEFEF',
        flex: 1,
        alignItems: 'center',
    },
    banner: {
        height: 200,
        width: winWidth,
    },
    zlBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 8,
        paddingRight: 8,
        paddingTop: 12,
        paddingBottom: 12,
        backgroundColor: '#FFF',
        marginBottom: 0.6,
    },
    dyzlBox: {
        backgroundColor: '#DFDF19',
        borderRadius: 4,
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 5,
        paddingRight: 5,
        paddingTop: 8,
        paddingBottom: 8
    },
    dyzlTxt: {
        fontSize: 14,
        color: '#FFF',
    },
    tabBox: {
        height: 60,
        width: winWidth,
        backgroundColor: '#FFF',
        marginBottom: 10,
    },
    tabTxt: {
        fontSize: 16,
    },
    tabLine: {
        flex: 1,
        marginLeft: 45,
        marginRight: 45
    }
});